import T from 'utils/T';
import { PureComponent } from 'react';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import './leafletMap.js';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';

// 加载mapUtil枚举文件
import { ZOOM, CENTER } from './constants';

export default class LeafLetMap extends PureComponent {


    componentDidMount(){
        // this._mount();
    }

    /**
     * 默认数据
     *
     * @returns {Array.<Object>}
     */
    getDefaultData() {
        return [
            {
                alreadyFly: [
                    [48.507222, -0.1275],
                    [44.8567, 2.3508],
                    [45.9, 12.5],
                    [52.516667, 13.383333],
                    [46.4166, 26.1]
                ],
                notFly: [
                    [48.507222, -0.1275],
                    [50.507222, 10.1275],
                    [60.507222, 20.1275],
                ]
            }

        ];
    }

    getDefaultOptions() {
        return {

        };
    }
    /**
     * 初始化地图
     * @param {String} mapId    地图容器id
     * @param {Object} options  地图配置
     * @returns {null|*}
     */
    initMap(mapId, options = {}) {
        this.map = L.map(mapId, Object.assign({
            center: CENTER,
            zoom: ZOOM.minZoom,
            layers: [L.tileLayer.tileServiceProvider('Google.Satellite.Map', ZOOM)],
            zoomControl: false,
            doubleClickZoom: false,
            attributionControl: false,
            trackResize: true,  // 确定地图在窗口尺寸改变时是否可以自动处理浏览器以更新视图
            renderer: L.canvas()
            // renderer: L.svg()
        }, options));

        return this.map;
    }

    /**
     * 绘制点到地图
     * @param {Array} latlngs [lat, lng]
     * @param {Object} options  配置说明： http://leafletjs.com/reference-1.2.0.html#marker
     * @returns {*}
     */
    drawMarker(latlngs, options = {}) {
        return L.marker(latlngs, Object.assign({
            icon: L.icon({
                // iconUrl: IconMarker,
                iconSize: [16, 16],
                // iconAnchor: [16, 16],
            })
        }, options)).addTo(this.map);
    }

    /**
     * 挂载
     *
     * @private
     */
    _mount() {
        this.$leafletMap = $('<div id="mapid"/>')
            .css({
                width: '100%',
                height: '100%',
                margin: 0,
                padding: 0,
            });
        this.L = L;
        this.$leafletMap.appendTo(this.$leafletMapOuter);
        this.initMap(this.$leafletMap, this.getDefaultOptions());

    }

    /**
     * 清除所有layer
     */
    removeAllLayers() {
        this.map.eachLayer((layer) => {
            layer.remove();
        });
    }

    render() {
        const position = [this.state.lat, this.state.lng]
        return (
            <Map center={position} zoom={this.state.zoom}>
                <TileLayer
                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={position}>
                    <Popup>
                        A pretty CSS3 popup. <br /> Easily customizable.
                    </Popup>
                </Marker>
            </Map>
        )
    }

}
